<template>
	<!--    全屏容器    -->
	<div ref="pageDiv" @mousemove="demo_move" @mouseup="demo_up" :class="{'zlevelTop':mouseDownState}" style="position: absolute;top: 0;height: calc(100% - 50px);top: 50px; width: 12%">
		<!--  点击蒙版  -->

		<div v-if="menuOpen" @click.stop="closeOpenModal" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999"></div>
		<!--  多功能菜单 -->
		<div :class="{'six-more-modal-btn':menuOpen,'moreModal':!menuOpen,'more-tran-animate':!mouseDownState}" ref="actionMgr"
		 :style="position" @mousedown="demo_down">

			<Icon @click="colse_ball()" v-if="!menuOpen" type="md-close" size="20" class="icon-css" style="padding-left:60px;cursor:pointer;" />

			<!--  触发器 -->
			<div v-if="!menuOpen" @click="demo_click" class="imgMore">
				<Tooltip content="我是梧桐君" theme="light">
					<img class="more-img" src="../assets/head3.png" />
				</Tooltip>
			</div>
		</div>
		<Modal title="梧桐大数据助手" v-model="menuOpen" :mask-closable="false" width=50% :footer-hide="true">
			<p>
				<chatter v-if="menuOpen" ref="chatter" class="chatter_css"></chatter>
			</p>
		</Modal>
	</div>

</template>
<script>
	import chatter from "./chatter"
	export default {
		name: "homeDragbtn",
		props: {
			// 通过position来设置初始定位
			position: {
				type: Object,
				default: function() {
					return {
						top: "75vh",
						left: "2vw"
					}
				}
			},
			Pshow: {
				default: true
			}
		},
		watch: {
			Pshow(newV, oldV) {
				console.log('Pshow', newV)
				this.ifshow = newV
			}
		},
		components: {
			chatter
		},
		data() {
			return {
				ifshow: true,
				menuOpen: false, //  菜单展开状态
				mouseDownState: false, //  鼠标点击状态
				iX: 0,
				iY: 0,
				dX: 0,
				dY: 500, //  初始定位
				lastMoveIndex: 0, //  拖拽计数
				curMoveIndex: 0, //  历史计数
			}
		},

		created: function() {
			this.ifshow = this.Pshow
		},
		methods: {
			colse_ball() {
				this.$Message.success('问答助手可点击右上角机器人图标重新打开');
				this.$emit('dialogVisibleEvent', false);
			},
			//  鼠标按下
			demo_down(event) {
				//  如果打开了菜单，则不做响应
				if (this.menuOpen) {
					this.mouseDownState = false;
					return
				}
				console.log("demo_down", event);
				/* 此处判断  pc 或 移动端 得到 event 事件 */
				var touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				// 鼠标点击 面向页面 的 x坐标 y坐标
				let {
					clientX,
					clientY
				} = touch;
				// 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
				this.iX = clientX - this.$refs.actionMgr.offsetLeft;
				// 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
				this.iY = clientY - this.$refs.actionMgr.offsetTop;
				// 设置当前 状态为 鼠标按下
				this.mouseDownState = true;
			},
			//  鼠标拖拽
			demo_move(event) {
				//鼠标按下 切移动中
				if (this.mouseDownState) {
					console.log("demo_move", event);
					/* 此处判断  pc 或 移动端 得到 event 事件 */
					var touch;
					if (event.touches) {
						touch = event.touches[0];
					} else {
						touch = event;
					}
					// 鼠标移动时 面向页面 的 x坐标 y坐标
					let {
						clientX,
						clientY
					} = touch;
					//当前页面全局容器 dom 元素  获取容器 宽高
					let {
						clientHeight: pageDivY,
						clientWidth: pageDivX
					} = this.$refs.pageDiv;
					/* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
					let [x, y] = [clientX - this.iX, clientY - this.iY];

					//拖拽按钮 dom 元素  获取 宽高 style 对象
					let {
						clientHeight: actionMgrY,
						clientWidth: actionMgrX,
						style: actionMgrStyle
					} = this.$refs.actionMgr;
					/* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于
					   设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0
					*/
					if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
					else if (x < 0) x = 0;
					if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
					else if (y < 0) y = 0;
					this.dX = x;
					this.dY = y;
					// 计算后坐标  设置 按钮位置
					actionMgrStyle.left = `${x}px`;
					actionMgrStyle.top = `${y}px`;
					actionMgrStyle.bottom = "auto";
					actionMgrStyle.right = "auto";
					//  move Index
					this.lastMoveIndex++;
					//  当按下键滑动时， 阻止屏幕滑动事件
					event.preventDefault();
				}
			},
			//    鼠标抬起
			demo_up(event) {
				console.log("demo_up", event);
				//  当前页面全局容器 dom 元素  获取容器 宽高
				let {
					clientHeight: windowHeight,
					clientWidth: windowWidth
				} = document.documentElement;
				console.log('全局容器:', windowWidth, windowHeight);
				//  拖拽按钮 dom 元素  获取 宽高 style 对象
				let {
					clientHeight: actionMgrY,
					clientWidth: actionMgrX,
					style: actionMgrStyle
				} = this.$refs.actionMgr;

				console.log('拖拽按钮', actionMgrY, actionMgrX, actionMgrStyle);

				// 计算后坐标  设置 按钮位置
				if (this.dY > 0 && this.dY < (windowHeight - 50)) { //  不在顶部 且 不在底部
					// if (this.dX <= (windowWidth / 2)) { //  left 小于等于屏幕一半
					// 	actionMgrStyle.left = 0;
					// 	actionMgrStyle.right = 'auto';
					// } else { //  left 大于屏幕一半
					// 	actionMgrStyle.left = 'auto';
					// 	actionMgrStyle.right = 0;
					// }
					// if (this.dY >= (windowHeight / 2)) { //  宽度大于1/2时，是将top改为auto，调整bottom
					// 	actionMgrStyle.top = 'auto';
					// 	actionMgrStyle.bottom = (windowHeight - this.dY - 50) + 'px';
					// }
				} else {
					if (this.dY === 0) { //  在顶部
						actionMgrStyle.top = 0;
						actionMgrStyle.bottom = 'auto';
					} else if (this.dY === (windowHeight - 50)) {
						actionMgrStyle.bottom = 0;
						actionMgrStyle.top = 'auto';
					}
					if (this.dX >= (windowWidth / 2)) { //  右侧是将left改为auto，调整right
						actionMgrStyle.left = 'auto';
						actionMgrStyle.right = (windowWidth - this.dX - 50) + 'px';
					}
				}
				this.mouseDownState = false;
			},
			//    单击事件
			demo_click() {
				console.log("demo_click|moveIndex:", this.lastMoveIndex, this.curMoveIndex);
				//  mouseup 后会激活click事件
				//  如果上一次down事件到下一次click事件中经历10次以下move，则视为纯点击事件
				if (this.lastMoveIndex - this.curMoveIndex <= 10) {
					//  点击事件
					this.menuOpen = !this.menuOpen;
					if (this.menuOpen) {
						//  打开菜单
					}
				}
				this.curMoveIndex = this.lastMoveIndex
			},
			//    点击空白关闭菜单
			closeOpenModal() {
				this.menuOpen = false
			}
		}
	}
</script>
<style scoped="">
	.ivu-modal {
		top: 10vh;
	}

	.zlevelTop {
		z-index: 999;
	}

	.more-tran-animate {
		transition: 0.5s;
	}

	.moreModal {
		/* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*/
		z-index: 999;
		position: fixed;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0);
		line-height: 10px;
		text-align: center;
		color: #fff;
		opacity: 0.6;
	}

	.moreModal:hover {
		opacity: 1;
	}
	.moreModal:hover > .icon-css{
		color: red;
	}

	.six-more-modal-btn {
		position: fixed;
		z-index: 999;
		width: 50%;
		height: 70%;
		border-radius: 5px;
		/* background: #1A1A1A; */
		color: black;
		margin: auto;
	}

	.imgMore {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.more-img {
		margin-top: -80px;
		width: 30.5px;
		height: 40px;
	}

</style>
